<!--
 * @描述: 
 * @作者: 约訂
 * @Date: 2024-07-24 13:37:08
 * @LastEditTime: 2024-07-29 13:23:31
 * @修改人员: 约訂
-->
<!--部门管理 -->
<template>
    <!-- PRIV_TITTLE_CREATE 新增字典标题 - 权限表示 -->
    <div class="app-container main flex-box c-c-c">
        <div class="title">
            参数设置
        </div>
        <el-row class="list_box_top">
            <el-table v-loading="loadingTicket" ref="DepartmentList" :data="ticketList" row-key="id" stripe border>
                <el-table-column label="平台费" align="center" width="200">
                    <template slot-scope="scope">
                        <div class="amount_number">
                            <span>{{ scope.row.platform.toFixed(2) }}</span> 元
                        </div>

                    </template>
                </el-table-column>
                <el-table-column label="体现手续比例" align="center" width="200">
                    <template slot-scope="scope">
                        <div class="amount_number">
                            <span>{{ scope.row.mediationNum }}</span> %
                        </div>

                    </template>
                </el-table-column>
                <el-table-column label="预约失效天数" align="center" width="200">
                    <template slot-scope="scope">
                        <div class="amount_number">
                            <span>{{ scope.row.appointmentDay }}</span>天
                        </div>

                    </template>
                </el-table-column>
                <el-table-column label="上门失效天数" align="center" width="200">
                    <template slot-scope="scope">
                        <div class="amount_number">
                            <span>{{ scope.row.doorDay }}</span> 天
                        </div>

                    </template>
                </el-table-column>
                <el-table-column label="接单失效天数" align="center" width="200">
                    <template slot-scope="scope">
                        <div class="amount_number">
                            <span>{{ scope.row.orderDay }}</span> 天
                        </div>

                    </template>
                </el-table-column>
                <el-table-column label="超长预约天数" align="center" width="200">
                    <template slot-scope="scope">
                        <div class="amount_number">
                            <span>{{ scope.row.longAboutDay }}</span>天
                        </div>

                    </template>
                </el-table-column>
                <el-table-column label="服务天数" align="center" width="200">
                    <template slot-scope="scope">
                        <div class="amount_number">
                            <span>{{ scope.row.serviceDay }}</span>天
                        </div>

                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <!-- <el-button class="edit_list_btn list_btn" v-permission="['PRIV_POWERS_UPDATE']" type="info"
                            size="mini" @click="EditParameter(scope.row)">修改</el-button> -->
                        <!--  icon="el-icon-delete" -->
                        <el-button class="del_list_btn list_btn" :disabled="showPopup"
                            v-permission="['PRIV_POWERS_DELETE']" type="danger" size="mini"
                            @click="EditParameter(scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <div class="title">
            工单异常状态配置
        </div>
        <el-row class="list_box">
            <el-table v-loading="loadingAbnormalTime" height="100%" ref="abnormalTimeList" :data="abnormalTimeList"
                row-key="idAbnormalTimeList" stripe border>
                <el-table-column label="工单状态" align="center" width="200">
                    <template slot-scope="scope">
                        <div class="amount_number">
                            <span>{{ scope.row.stateName }}</span>
                        </div>

                    </template>
                </el-table-column>
                <el-table-column label="风险时间(小时)" align="center" width="200">
                    <template slot-scope="scope">
                        <div class="amount_number">
                            <span>{{ scope.row.riskTime }}</span>
                        </div>

                    </template>
                </el-table-column>
                <el-table-column label="异常时间(小时)" align="center" width="200">
                    <template slot-scope="scope">
                        <div class="amount_number">
                            <span>{{ scope.row.errorTime }}</span>
                        </div>

                    </template>
                </el-table-column>
                <el-table-column label="是否启用" align="center" width="200">
                    <template slot-scope="scope">
                        <div class="amount_number">
                            <el-switch @change="ChangeSwitch(scope.row)" v-model="scope.row.enable" :active-value="1"
                                :inactive-value="0" inline-prompt inactive-color="#ff4949" />

                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button class=" list_btn" :disabled="abnormalTimeBox" v-permission="['PRIV_POWERS_DELETE']"
                            type="primary" size="mini" @click="EditAbnormalTime(scope.row)">设置</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <vxe-modal v-model="showPopup" width="300" :mask="false" :lockView="false">
            <template #title>
                <span>修改平台参数信息</span>
            </template>
            <template #default>
                <el-form ref="ticketForm" :model="ticketEdit" :rules="ticketRules" label-width="120px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="平台费用" prop="platform">
                                <el-input v-model="ticketEdit.platform" maxlength="50" placeholder="请输入平台费用" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="体现手续比例" prop="mediationNum">
                                <el-input v-model="ticketEdit.mediationNum" maxlength="50" placeholder="请输入体现手续比例" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="预约失效天数" prop="appointmentDay">
                                <el-input v-model="ticketEdit.appointmentDay" maxlength="50" placeholder="请输入预约失效天数" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="上门失效天数" prop="doorDay">
                                <el-input v-model="ticketEdit.doorDay" placeholder="请输入上门失效天数" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="接单失效天数" prop="orderDay">
                                <el-input v-model="ticketEdit.orderDay" placeholder="请输入接单失效天数" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="超长预约天数" prop="longAboutDay">
                                <el-input v-model="ticketEdit.longAboutDay" placeholder="请输入超长预约天数" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="服务天数" prop="serviceDay">
                                <el-input v-model="ticketEdit.serviceDay" placeholder="请输入服务天数" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" class="flex-box l-c-e">
                            <el-button type="primary" @click="submitFormTicket">确 定</el-button>
                            <el-button @click="showPopup = false">取 消</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </template>
        </vxe-modal>
        <vxe-modal v-model="abnormalTimeBox" width="400" :mask="false" :lockView="false">
            <template #title>
                <span>工单异常状态配置</span>
            </template>
            <template #default>
                <el-form ref="ticketForm" :model="abnormalTimeEdit" :rules="abnormalTimeRules" label-width="150px">
                    <el-row class="abnormal_box">
                        <el-col :span="24">
                            <el-form-item label="风险时间（小时）" prop="riskTime">
                                <el-input-number size="medium" :min="0"
                                    v-model="abnormalTimeEdit.riskTime"></el-input-number>

                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="异常时间（小时）" prop="errorTime">
                                <el-input-number size="medium" :min="0"
                                    v-model="abnormalTimeEdit.errorTime"></el-input-number>

                            </el-form-item>
                        </el-col>

                        <el-col :span="24" class="flex-box l-c-e">
                            <el-button type="primary" @click="SubmitFormAbnormalTime">确 定</el-button>
                            <el-button @click="abnormalTimeBox = false">取 消</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </template>
        </vxe-modal>
    </div>
</template>

<script type="javascript/text">
// @ts-ignore
import { getToken, setToken, removeToken } from "@/utils/auth";
import { h } from 'vue'
import { MessageBox } from 'element-ui';
// import { VxeTable, VxeColumn } from 'vxe-table'
import {
    queryTicket,
    queryAbnormalTime,
    editTicket,
    adjustAbnormalTime,
    EditAbnormalTim
    // @ts-ignore
} from "@/api/system/parameter";
// @ts-ignore
import { Edit } from "vxe-table";
import { values } from "xe-utils";
export default {
    // components: {  },
    data() {
        return {
            /**显示数据 */
            abnormalTimeList: [],
            /**备份列表数据 */
            backupList: [],
            // 遮罩层
            loadingAbnormalTime: true,
            /*顶部遮罩层*/
            loadingTicket: true,
            /**顶部参数配置列表 */
            ticketList: [],
            showPopup: false,
            /**修改参数设置数据 */
            ticketEdit: {
                id: "",
                platform: "",
                doorDay: "",
                appointmentDay: "",
                orderDay: "",
                longAboutDay: "",
                serviceDay: "",
                mediationNum: ""
            },
            // 修改参数配置表单校验
            ticketRules: {
                platform: [{ required: true, message: "请输入平台费用", trigger: "blur" }],
                mediationNum: [{ required: true, message: "请输入体现手续比例", trigger: "blur" }],
                appointmentDay: [{ required: true, message: "请输入预约失效天数", trigger: "blur" }],
                doorDay: [{ required: true, message: "请输入上门失效天数", trigger: "blur" }],
                orderDay: [{ required: true, message: "请输入接单失效天数", trigger: "blur" }],
                longAboutDay: [{ required: true, message: "请输入超长预约天数", trigger: "blur" }],
                serviceDay: [{ required: true, message: "请输入服务天数", trigger: "blur" }],
            },
            /**风险时间设置 */
            abnormalTimeEdit: {
                id: undefined,
                riskTime: 0,
                errorTime: 0
            },
            abnormalTimeRules: {
                // riskTime: [{ required: true, message: "请输入风险时间(小时)", trigger: "blur" }],
                // riskTime: [{ required: true, message: "请输入异常时间(小时)", trigger: "blur" }],
            },
            abnormalTimeBox: false
        };
    },
    methods: {
        /**获取参数配置列表 */
        async GetTicket() {
            this.loadingTicket = true
            let { data, statusCode } = await queryTicket({});
            if (statusCode != 200) return;
            this.loadingTicket = false
            this.ticketList = data
        },
        /**获取工单处理异常时间配置列表 */
        async GetAbnormalTime() {
            this.loadingAbnormalTime = true
            let { data, statusCode } = await queryAbnormalTime({});
            if (statusCode != 200) return;
            this.loadingAbnormalTime = false
            this.abnormalTimeList = data
        },
        /**
         *修改参数配置弹框开关
         */
        async EditParameter(row) {
            this.ticketEdit = JSON.parse(JSON.stringify(row))
            this.showPopup = true
        },
        /**确认修改参数配置 */
        async submitFormTicket() {
            this.$refs["ticketForm"].validate(async (valid) => {
                if (valid) {
                    let { statusCode } = await editTicket(this.ticketEdit);
                    if (statusCode != 200) return;
                    this.$message({
                        message: "修改成功",
                        type: "success",
                        center: true,
                    });
                    this.GetTicket()
                    this.showPopup = false
                }
            });
        },
        /**开关发生改变 */
        ChangeSwitch(row) {
            console.log(row);
            MessageBox({
                title: '消息',
                message: `确定是否将(${row.stateName})状态改为${row.enable == 1 ? '启用' : '关闭'}?`
                ,
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                beforeClose: (action, instance, done) => {
                    this.GetAbnormalTime()
                    done();
                    // if (action === 'confirm') {
                    //     // instance.confirmButtonLoading = true;
                    //     // instance.confirmButtonText = '执行中...';
                    //     // setTimeout(() => {
                    //     //     done();
                    //     //     setTimeout(() => {
                    //     //         instance.confirmButtonLoading = false;
                    //     //     }, 300);
                    //     // }, 3000);
                    // } else {
                    //     // done();
                    // }
                }
            }).then(async (action) => {
                let { statusCode } = await adjustAbnormalTime({ id: row.id });
                if (statusCode != 200) return;
                this.$message({
                    message: "调整成功",
                    type: "success",
                    center: true,
                });
                this.GetAbnormalTime()
                // this.$message({
                //     type: 'info',
                //     message: 'action: ' + action
                // });
            });
        },
        /**打开设置工单异常盒子 */
        EditAbnormalTime(row) {
            this.abnormalTimeEdit = JSON.parse(JSON.stringify(row))
            this.abnormalTimeBox = true
        },
        async SubmitFormAbnormalTime() {
            let { statusCode } = await EditAbnormalTim(this.abnormalTimeEdit);
            if (statusCode != 200) return;
            this.$message({
                message: "设置成功",
                type: "success",
                center: true,
            });
            this.GetAbnormalTime()
            this.abnormalTimeBox = false
        }
    },

    created() {
        this.GetTicket()
        this.GetAbnormalTime()
    },
    mounted() { },
};
</script>
<style lang="scss" scoped src="./index.scss"></style>
